<template>
  <div class="mapBox">
    <div id="map-dom" @wheel="handleScroll">
      <div class="rightTips" v-show="rightTipsShow">
        <div class="content" v-for="value in iconsData" :key="value.url">
          <img class="cloudImg" :src="value.url" />
          <span class="cloudTittle">{{ value.title }}</span>
        </div>
      </div>
      <div class="tools">
        <a-popover placement="leftTop">
          <template #content>
            <span class="ctrlComment">1.按住Alt键+鼠标滚轮可以缩放地图</span>
            <br />
            <span>2.鼠标双击可根据鼠标位置放大地图</span>
          </template>
          <div class="tips">
            <span>提示</span>
          </div>
        </a-popover>

        <a-select
          style="width: 100px"
          v-model:value="selectValue"
          @change="changeMapTypeFn"
        >
          <a-select-option value="简约风1">简约风1</a-select-option>
          <a-select-option value="简约风2">简约风2</a-select-option>
          <a-select-option value="简约风3">简约风3</a-select-option>
          <a-select-option value="海洋风1">海洋风1</a-select-option>
          <a-select-option value="海洋风2">海洋风2</a-select-option>
          <a-select-option value="海洋风3">海洋风3</a-select-option>
          <a-select-option value="深蓝色">深蓝色</a-select-option>
          <a-select-option value="路线图">路线图</a-select-option>
          <a-select-option value="卫星图">卫星图</a-select-option>
        </a-select>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Select, SelectOption, Popover } from 'ant-design-vue';
export default defineComponent({
  components: {
    ASelect: Select,
    ASelectOption: SelectOption,
    APopover: Popover,
  },
});
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import type { ComponentInternalInstance } from 'vue';
import type { LatLngDataType } from '../../types';
import {
  reniceLatLngData,
  afterLatLngData,
  latencyLatLngData,
  internationalLatLngData,
  newCloudLineLatLngData,
  hongkongOerrideData,
  hongkongReachableData,
} from './latlngList';
import { setLatencyData } from './latencyCurve';
import { hongkongCurveData } from './hongkongCurve';
// 引入 leaflet 样式
import 'leaflet/dist/leaflet.css';
// 引入 leaflet js 文件 需要现在env.d.ts中主动声明
import L from 'leaflet';
import '@elfalem/leaflet-curve';
import reniceImg from '@/assets/images/global/popIcon/existing_pop_points.png';
import afterImg from '@/assets/images/global/popIcon/will_input_pop.png';
import latencyImg from '@/assets/images/global/popIcon/latency.png';
import internationalImg from '@/assets/images/global/popIcon/DIA&IPLC_pop.png';
import cloudImg from '@/assets/images/global/popIcon/cloud.png';
import bluePointImg from '@/assets/images/global/popIcon/bluePoint.png';
import redPointImg from '@/assets/images/global/popIcon/redPoint.png';

import alibabaImg from '@/assets/images/global/cloudIcon/alibaba_cloud.png';
import googleImg from '@/assets/images/global/cloudIcon/google_cloud.png';
import amazonImg from '@/assets/images/global/cloudIcon/amazon_cloud.png';
import huaweiImg from '@/assets/images/global/cloudIcon/huawei_cloud.png';
import IBMImg from '@/assets/images/global/cloudIcon/IBM_cloud.png';
import birdImg from '@/assets/images/global/cloudIcon/bird_cloud.png';
import microsoftImg from '@/assets/images/global/cloudIcon/microsoft_cloud.png';
import oracleImg from '@/assets/images/global/cloudIcon/oracle_cloud.png';
import tencentImg from '@/assets/images/global/cloudIcon/tencent_cloud.png';

const route = useRoute();
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const rightTipsShow = ref<boolean>(false);
let map: any = null;
const markerData = reactive<any>({});
const curveData = reactive<any>({});
const defaultLngLat = reactive<LatLngDataType>({
  lat: 15,
  lng: 15,
  describe: '',
});
const selectValue = ref<string>('简约风1');
const selectActive = ref<string>('现有POP点线路');

const urlList = [
  // 1.简约风1-OpenStreetMap-OSM
  'https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
  // 2.简约风2-ArcGIS
  'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
  // 3.简约风3-ArcGIS
  'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}',
  // 4.海洋风1-ArcGIS
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
  // 5.海洋风2-ArcGIS
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
  // 6.海洋风3-ArcGIS
  'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
  // 7.深蓝色-ArcGIS
  'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
  // 8.路线图-谷歌地图CN
  'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=m,m&gl=&x={x}&y={y}&z={z}',
  // 9.卫星图-谷歌地图CN
  'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=y,m&gl=&x={x}&y={y}&z={z}',
];

type IconsData = {
  [key: string]: {
    url: string;
    title: string;
  };
};
const iconsData: IconsData = {
  alibaba: {
    url: alibabaImg,
    title: '阿里云',
  },
  google: {
    url: googleImg,
    title: '谷歌云',
  },
  amazon: {
    url: amazonImg,
    title: '亚马逊云',
  },
  huawei: {
    url: huaweiImg,
    title: '华为云',
  },
  IBM: {
    url: IBMImg,
    title: 'IBM云',
  },
  bird: {
    url: birdImg,
    title: '小鸟云',
  },
  microsoft: {
    url: microsoftImg,
    title: '微软云',
  },
  oracle: {
    url: oracleImg,
    title: 'ORACLE云',
  },
  tencent: {
    url: tencentImg,
    title: '腾讯云',
  },
};

onMounted(() => {
  // 初始化地图
  // 如果直接写在外面，因为setup相当于beforeCreate和created，所以会报错，获取不到map容器
  initMap();
});

// 初始化地图
const initMap = (): void => {
  // 获取map对象 参数：地理中心和缩放
  map = L.map('map-dom').setView([defaultLngLat.lat, defaultLngLat.lng], 3);
  // 设置地图的边界范围
  const minLatLng = [85.03736674934143, -179.5450977941195];
  const maxLatLng = [-85.0308620079953, 179.5450977941195];
  map.setMaxBounds([minLatLng, maxLatLng]);

  // 取消滚轮缩放事件
  map.scrollWheelZoom.disable();

  // 自定义右小角Logo和版权信息
  const attribution = map.attributionControl;
  attribution.setPrefix('');

  // 设置底图(原图：http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png)
  L.tileLayer(urlList[0], {
    // 此图层将显示的最大缩放级别（包括最大）
    maxZoom: 20,
    minZoom: 2,
    // 手机等高分辨率设备，图层显示可能会模糊，设置为true，可以改善。
    detectRetina: false,
  }).addTo(map);

  // 比例尺 https://leafletjs.cn/reference-1.8.0.html#control-scale
  const scale = L.control
    .scale({
      // 控件的最大宽度，单位是像素
      maxWidth: 200,
      // 是否显示公制比例线（米/公里）
      metric: true,
      // 是否显示英制比例线（英里/英尺）
      imperial: false,
    })
    .addTo(map);

  // 建议监听提到openPopup前面，因为写到openPopup后面，会监听不到
  map.on('popupopen', cleanPopupCloseBtnAttr);

  // 批量创建标注点+信息弹窗
  // 1.现有的POP点
  addRenicePopFn();

  if (route.path === '/latency') {
    clearMarkers();
    changeLatLngShow('国际-金融低延时');
  } else if (route.path === '/international') {
    clearMarkers();
    changeLatLngShow('All');
  } else if (route.path === '/transfer') {
    clearMarkers();
    changeLatLngShow('传输');
  }

  map.on('click', onMapClick);
};

function onMapClick(e: any) {
  console.log('latlng', e.latlng.toString());
}

// 按住Alt键+鼠标滚轮缩放地图
const handleScroll = (event: WheelEvent) => {
  if (event.altKey) {
    event.preventDefault(); // 阻止浏览器默认的滚动行为
    map.scrollWheelZoom.enable(); // 开启滚轮缩放
    // 设置地图的边界范围
    const minLatLng = [85.03736674934143, -179.5450977941195];
    const maxLatLng = [-85.0308620079953, 179.5450977941195];
    map.setMaxBounds([minLatLng, maxLatLng]);
    // 设置最大和最小缩放级别
    map.setMinZoom(2);
    map.setMaxZoom(20);
  } else {
    map.scrollWheelZoom.disable();
  }
};
// 切换底图
const changeMapTypeFn = (value: any) => {
  // 清空地图上所有图层
  map.value?.getLayers().clear();
  if (value === '简约风1') {
    setLayers(0);
  } else if (value === '简约风2') {
    setLayers(1);
  } else if (value === '简约风3') {
    setLayers(2);
  } else if (value === '海洋风1') {
    setLayers(3);
  } else if (value === '海洋风2') {
    setLayers(4);
  } else if (value === '海洋风3') {
    setLayers(5);
  } else if (value === '深蓝色') {
    setLayers(6);
  } else if (value === '路线图') {
    setLayers(7);
  } else if (value === '卫星图') {
    setLayers(8);
  }

  changeLatLngShow(selectActive.value);
  appContext.config.globalProperties.$mitt.emit(
    'defaultActive',
    selectActive.value
  );
};

// 设置底图
const setLayers = (index: number) => {
  // ------------------ 设置底图Url ------------------
  const layerUrl = urlList[index];
  L.tileLayer(layerUrl, { foo: 'bar' }).addTo(map);
};

// 1.添加现有的POP点函数
const addRenicePopFn = () => {
  const reniceIcon = L.icon({
    iconUrl: reniceImg,
    iconSize: [20, 20],
    iconAnchor: [9, 22],
    popupAnchor: [0, -14],
  });
  Object.keys(reniceLatLngData).forEach((value) => {
    const popupContent = `<p style='font-weight: bold'>${value}</p>`;
    const marker = L.marker(
      [reniceLatLngData[value].lat, reniceLatLngData[value].lng],
      { icon: reniceIcon }
    ).addTo(map);

    marker.bindPopup(popupContent);
    marker.on('mouseover', () => {
      marker.openPopup();
    });

    markerData[value] = marker;
  });
};

// 2.添加即将投入POP点函数
const addAfterPopFn = () => {
  const afterIcon = L.icon({
    iconUrl: afterImg,
    iconSize: [20, 20],
    iconAnchor: [12, 22],
    popupAnchor: [0, -14],
  });
  Object.keys(afterLatLngData).forEach((value) => {
    const popupContent = `<p style='font-weight: bold'>${value}</p>`;
    const marker = L.marker(
      [afterLatLngData[value].lat, afterLatLngData[value].lng],
      { icon: afterIcon }
    ).addTo(map);

    marker.bindPopup(popupContent);
    // 注册鼠标移入事件
    marker.on('mouseover', () => {
      marker.openPopup();
    });
    // // 注册鼠标移出事件
    // marker.on('mouseout', () => {
    //   // 设置定时器，在鼠标离开后延迟0.5秒关闭弹窗
    //   setTimeout(() => {
    //     marker.closePopup();
    //   }, 500);
    // });
    markerData[value] = marker;
  });
};

// 设置抛物线路径的复用函数
const setCurveLine = (
  dashArray: string,
  startLat: number,
  startLng: number,
  middleLat: number,
  middleLng: number,
  endLat: number,
  endLng: number,
  duration: number,
  canvas?: string,
  lineColor?: string
) => {
  const curve = L.curve(
    ['M', [startLat, startLng], 'Q', [middleLat, middleLng], [endLat, endLng]],
    {
      dashArray: dashArray,
      animate: { duration: duration, iterations: Infinity },
      weight: '1',
      // 使用 Canvas 渲染器则丢失动画效果，但能使距离太短的两个点描绘出曲线
      renderer: canvas ? L.canvas() : null,
    }
  ).addTo(map);
  if (lineColor) {
    curve.setStyle({ color: lineColor });
  }
  return curve;
};

// 3.添加低延时线路函数
const addLatencyFn = (str?: string) => {
  const latencyIcon = L.icon({
    iconUrl: latencyImg,
    iconSize: [20, 20],
    iconAnchor: [10, 20],
    popupAnchor: [0, -12],
  });

  const latlngData = JSON.parse(JSON.stringify(latencyLatLngData));
  if (str && str === '国内') {
    delete latlngData['HongKong'];
    delete latlngData['Singapore'];
    delete latlngData['Tokyo'];
    delete latlngData['London'];
    delete latlngData['Chicago'];
    delete latlngData['Sydney'];
    delete latlngData['NewYork'];
    map.setView([28.844674, 89.384766], 4);
  } else if (str && str === '国际') {
    delete latlngData['ShangHai'];
    delete latlngData['Dalian'];
    delete latlngData['BeiJing'];
    delete latlngData['ZhengZhou'];
    delete latlngData['GuangZhou'];
    delete latlngData['DongGuan'];
    map.setView([24.5, 54.6], 3);
  } else {
    map.setView([20, 42], 3);
  }

  Object.keys(latlngData).forEach((value) => {
    const popupContent = `<p style='font-weight: bold'>${value}</p>`;
    const marker = L.marker([latlngData[value].lat, latlngData[value].lng], {
      icon: latencyIcon,
    }).addTo(map);

    marker.bindPopup(popupContent);
    // 注册鼠标移入事件
    marker.on('mouseover', () => {
      marker.openPopup();
    });
    // 注册鼠标移出事件
    // marker.on('mouseout', () => {
    //   // 设置定时器，在鼠标离开后延迟0.5秒关闭弹窗
    //   setTimeout(() => {
    //     marker.closePopup();
    //   }, 500);
    // });
    markerData[value] = marker;
  });

  const newLatlngData = setLatencyData(latlngData);

  // 设置抛物线路径，传入(起始经纬度，中心高点经纬度，末端经纬度)
  Object.keys(newLatlngData).forEach((key: string) => {
    if (!curveData[key] && newLatlngData[key] && newLatlngData[key].start) {
      const curveStart = newLatlngData[key].start;
      const curveEnd = newLatlngData[key].end;
      const curveT = newLatlngData[key].t;
      const curveColor =
        (selectValue.value === '深蓝色' || selectValue.value === '卫星图') &&
        newLatlngData[key].color === null
          ? '#ffffff'
          : newLatlngData[key].color;

      curveData[key] = setCurveLine(
        '10,10',
        curveStart.lat,
        curveStart.lng,
        curveT[0],
        curveT[1],
        curveEnd.lat,
        curveEnd.lng,
        5000,
        undefined,
        curveColor
      );
    }
  });
};

// 4.添加国际本地DIA&IPLC的POP点函数
const addinternationalPopFn = (str?: string) => {
  const internationalIcon = L.icon({
    iconUrl: internationalImg,
    iconSize: [18, 18],
    iconAnchor: [9, 18],
    popupAnchor: [1, -10],
  });

  let latlngData: any = {};
  if (!str || str === 'All') {
    latlngData = internationalLatLngData;
  } else {
    Object.keys(internationalLatLngData).forEach((value) => {
      if (internationalLatLngData[value].continents === str) {
        latlngData[value] = internationalLatLngData[value];
      }
    });
  }

  Object.keys(latlngData).forEach((value) => {
    const popupContent = `<p style='font-weight: bold'>${value}</p>`;
    const marker = L.marker([latlngData[value].lat, latlngData[value].lng], {
      icon: internationalIcon,
    }).addTo(map);

    marker.bindPopup(popupContent);
    // 注册鼠标移入事件
    marker.on('mouseover', () => {
      marker.openPopup();
    });
    // 注册鼠标移出事件
    // marker.on('mouseout', () => {
    //   // 设置定时器，在鼠标离开后延迟0.5秒关闭弹窗
    //   setTimeout(() => {
    //     marker.closePopup();
    //   }, 500);
    // });
    markerData[value] = marker;
  });
};

// 5.添加国际云专线的POP点函数
const addcloudLinePopFn = () => {
  const customIcon = L.icon({
    iconUrl: cloudImg,
    iconSize: [18, 18],
    iconAnchor: [9, 18],
    popupAnchor: [1, -10],
  });

  const iconsData: any = {
    alibabaIcon: alibabaImg,
    googleIcon: googleImg,
    amazonIcon: amazonImg,
    huaweiIcon: huaweiImg,
    IBMIcon: IBMImg,
    birdIcon: birdImg,
    microsoftIcon: microsoftImg,
    oracleIcon: oracleImg,
    tencentIcon: tencentImg,
  };

  Object.keys(newCloudLineLatLngData).forEach((value) => {
    const icons = newCloudLineLatLngData[value].icons;
    const iconImages = icons
      .map((icon) => {
        return `<img src="${iconsData[icon]}" style="height: 20px; width: auto;margin-right:5px;"/>`;
      })
      .join('');
    const popupContent = `<div style="width: ${
      icons.length * 40
    }px;min-width:80px;"><p style="width:auto;font-weight: bold">${value}</p><div style="display:flex;">${iconImages}</div></div>`;

    const marker = L.marker(
      [newCloudLineLatLngData[value].lat, newCloudLineLatLngData[value].lng],
      { icon: customIcon }
    ).addTo(map);

    marker.bindPopup(popupContent);
    // 注册鼠标移入事件
    marker.on('mouseover', () => {
      marker.openPopup();
    });
    // 注册鼠标移出事件
    // marker.on('mouseout', () => {
    //   // 设置定时器，在鼠标离开后延迟0.5秒关闭弹窗
    //   setTimeout(() => {
    //     marker.closePopup();
    //   }, 500);
    // });
    markerData[value] = marker;
  });
};

// 6.添加香港覆盖POP点函数
const addTransferPopFn = () => {
  const oerridePop = L.icon({
    iconUrl: bluePointImg,
    iconSize: [18, 18],
    iconAnchor: [10, 10],
    popupAnchor: [-1, 0],
  });

  Object.keys(hongkongOerrideData).forEach((value) => {
    const popupContent = `<p style='font-weight: bold'>${value}</p><p>名称：${hongkongOerrideData[value].name}</p><p>区域：${hongkongOerrideData[value].area}</p><p>详情：${hongkongOerrideData[value].description}</p>`;
    const marker = L.marker(
      [hongkongOerrideData[value].lat, hongkongOerrideData[value].lng],
      {
        icon: oerridePop,
      }
    ).addTo(map);

    marker.bindPopup(popupContent);
    marker.on('mouseover', () => {
      marker.openPopup();
    });

    markerData[value] = marker;
  });

  const reachablePop = L.icon({
    iconUrl: redPointImg,
    iconSize: [18, 18],
    iconAnchor: [10, 10],
    popupAnchor: [-1, 0],
  });
  Object.keys(hongkongReachableData).forEach((value) => {
    const popupContent = `<p>${value}</p><p>名称：${hongkongReachableData[value].name}</p><p>区域：${hongkongReachableData[value].area}</p><p>详情：${hongkongReachableData[value].description}</p>`;
    const marker = L.marker(
      [hongkongReachableData[value].lat, hongkongReachableData[value].lng],
      { icon: reachablePop }
    ).addTo(map);

    marker.bindPopup(popupContent);
    marker.on('mouseover', () => {
      marker.openPopup();
    });

    markerData[value] = marker;
  });
  map.setView([22.36, 114.190818], 12);

  // 设置抛物线路径，传入(起始经纬度，中心高点经纬度，末端经纬度)
  Object.keys(hongkongCurveData).forEach((key: string) => {
    if (!curveData[key]) {
      const curveStart = hongkongCurveData[key].start;
      const curveEnd = hongkongCurveData[key].end;
      const curveT = hongkongCurveData[key].t;
      const curveColor =
        (selectValue.value === '深蓝色' || selectValue.value === '卫星图') &&
        hongkongCurveData[key].color === null
          ? '#ffffff'
          : hongkongCurveData[key].color;
      curveData[key] = setCurveLine(
        '10,10',
        curveStart.lat,
        curveStart.lng,
        curveT[0],
        curveT[1],
        curveEnd.lat,
        curveEnd.lng,
        5000,
        'canvas',
        curveColor
      );
    }
  });
};

// 切换POP点种类按钮
const changeLatLngShow = (value: string) => {
  rightTipsShow.value = false;
  selectActive.value = value;
  // 调用清除标注点函数
  clearMarkers();
  // 移除曲线对象
  if (Object.keys(curveData).length) {
    Object.keys(curveData).forEach((key) => {
      curveData[key].remove();
      delete curveData[key];
    });
  }
  const continents: string[] = [
    'Europe',
    'Asia',
    'North America',
    'Africa',
    'South America',
    'Oceania',
    'All',
  ];
  // 判断点击按钮
  if (value === '现有POP点线路') {
    addRenicePopFn();
  } else if (value === '即将投入POP点线路') {
    addAfterPopFn();
  } else if (value === '金融低延时线路') {
    addLatencyFn();
  } else if (value === '国际本地DIA/IPLC') {
    addinternationalPopFn();
  } else if (value === '国际云专线') {
    addcloudLinePopFn();
    rightTipsShow.value = true;
  } else if (value === '国内-金融低延时') {
    addLatencyFn('国内');
  } else if (value === '国际-金融低延时') {
    addLatencyFn('国际');
  } else if (continents.includes(value)) {
    addinternationalPopFn(value);
  } else if (value === '传输') {
    addTransferPopFn();
  }
};
defineExpose({ changeLatLngShow });

// 清除地图上的所有标注点
function clearMarkers() {
  map.eachLayer(function (layer: any) {
    if (layer instanceof L.Marker) {
      map.removeLayer(layer);
    }
  });
}

// 清除所有弹窗默认关闭按钮的href属性
const cleanPopupCloseBtnAttr = (): void => {
  // 获取所有弹窗关闭按钮
  const closeBtn: any = document.getElementsByClassName(
    'leaflet-popup-close-button'
  );
  // 遍历所有关闭按钮
  for (const iterator of closeBtn) {
    // 移除href
    iterator.removeAttribute('href');
  }
  if (Object.keys(markerData).length) {
    Object.keys(markerData).forEach((key) => {
      delete markerData[key];
    });
  }
};
</script>

<style lang="scss" scoped>
.mapBox {
  width: 100%;
  height: 100%;
  #map-dom {
    position: relative;
    width: 100%;
    height: 100%;

    .ctrlComment {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 502;
    }

    .rightTips {
      position: absolute;
      right: 5%;
      bottom: 5%;
      width: 170px;
      height: auto;
      background-color: rgba(255, 255, 255, 0.6);
      border: 1px solid #ffffff;
      border-radius: 10px;
      z-index: 401;
      padding-top: 22px;
      padding-left: 25px;
      .content {
        margin-bottom: 20px;
        .cloudImg {
          width: 33px;
          height: auto;
          margin-right: 10px;
        }
        .cloudTittle {
          font-family: 'SourceHanSansCN-Light';
          font-size: 16px;
          color: #060606;
        }
      }
      .content_1 {
        margin-bottom: 12px;
      }
      .content_3 {
        .cloudImg {
          width: 35px;
          height: auto;
          margin-right: 8px;
        }
      }
    }

    .tools {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 502;
      display: flex;
      justify-content: space-between;

      .tips {
        width: 50px;
        height: 32px;
        background-color: #fff;
        border-radius: 6px;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        :hover {
          cursor: pointer;
        }
      }
    }
  }
}

.leaflet-container {
  font-size: 12px !important;
}
:deep(.leaflet-popup-close-button) {
  &:hover {
    cursor: pointer;
    span {
      color: red;
    }
  }
}

// :deep(.leaflet-popup-content) {
//   width: max-content !important;
// }

:deep(.icon-pinpai) {
  color: #f09b0d;
  font-size: 20px;
}
</style>
